import React, { Component } from 'react';
import { Layout } from 'antd';
import { Menu, Button, Tag, Breadcrumb } from 'antd';
import route from '../../route/route'
import { connect } from "react-redux"

import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    MailOutlined,
    PieChartOutlined
} from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { SubMenu } = Menu;

const { Header, Sider, Content } = Layout;

class Home extends Component {
    state = {
        collapsed: false,
        Breadcrumb: [],
        bread: [],
    };

    componentDidMount() {
        let breakList = JSON.parse(localStorage.getItem('breakList')) || [];
        let bread = JSON.parse(localStorage.getItem('bread'))
        this.setState({
            Breadcrumb: breakList,
            bread
        })

    }

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    selectSub = (e) => {
        let tar = e.target

        if (tar.className === 'ant-menu-title-content') {
            let list = []
            let inner = tar.parentNode.parentNode.parentNode.previousElementSibling.children[1] ? tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : ""
            list.push(inner)
            list.push(e.target.innerHTML)
            this.setState({
                bread: list
            })
        }
        if (tar.nodeName === "A") {
            if (tar.innerHTML !== '工作台') {
                let bread = []
                let grandPa = tar.parentNode.parentNode.parentNode.parentNode.parentNode.previousElementSibling.children[1] ? tar.parentNode.parentNode.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : ""
                let parent = tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML ? tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : tar.parentNode.parentNode.parentNode.previousElementSibling.children[0].innerHTML
                let self = tar.innerHTML
                if (grandPa) {
                    bread.push(grandPa)
                    bread.push(parent)
                    bread.push(self)


                    this.setState({
                        bread
                    }, () => {
                        console.log(this.state.bread);
                        localStorage.setItem('bread', JSON.stringify(this.state.bread))
                    })

                } else {
                    bread.push(parent)
                    bread.push(self)


                    this.setState({
                        bread
                    }, () => {
                        console.log(this.state.bread);
                        localStorage.setItem('bread', JSON.stringify(this.state.bread))
                    })
                }
            } else {
                let list = []
                list.push(tar.innerHTML)
                this.setState({
                    bread: list
                }, () => {
                    console.log(this.state.bread);
                    localStorage.setItem('bread', JSON.stringify(this.state.bread))
                })
            }
            let url = tar.getAttribute('href')
            let title = tar.innerHTML
            let obj = {
                url,
                title
            }
            this.props.dispatch({
                type: "Breadcrumb",
                payload: obj

            })
            let breakList = JSON.parse(localStorage.getItem('breakList')) || [];

            let index = breakList.findIndex(item => item.url === url)

            if (index === -1) {
                breakList.push({ ...obj })
            } else {
                breakList.splice(index, 1)
                breakList.push({ ...obj })
            }
            localStorage.setItem('breakList', JSON.stringify(breakList))
            this.setState({
                Breadcrumb: breakList
            })

        }
    }

    log(v) {
        console.log(v);
        let breakList = JSON.parse(localStorage.getItem('breakList')) || [];
        console.log(breakList, '///')
        let index = breakList.findIndex(item => item.url === v.url)
        console.log(breakList[index])
        breakList.splice(index, 1)


        if (!breakList.length) {
            this.props.history.push('/home/welcome');
            window.location.reload()
        } else {
            if (index > 0) {
                this.props.history.push(breakList[index - 1].url)
            } else {
                this.props.history.push('/home/welcome')
            }
        }
        localStorage.setItem('breakList', JSON.stringify(breakList))
        this.setState({
            Breadcrumb: breakList
        })
    }
    render() {
        return (
            <div className='Home'>
                <Layout>
                    <Header style={{ background: 'skyblue', fontSize: '25px', color: '#fff' }}>电商后台管理系统</Header>
                    <Layout>
                        <Sider collapsed={this.state.collapsed} onClick={this.selectSub}>
                            <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
                                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                            </Button>
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                            >
                                {
                                    route.map(item => item.children ? item.children.map((item2, index2) => item2.children ? <SubMenu key={"sub1" + item2.path} icon={<MailOutlined />} title={item2.title}>
                                        {
                                            item2.children.map((item3, index3) => item3.path ? item3.children ? <SubMenu key={"sub" + item3.title} title={item3.title}>
                                                {
                                                    item3.children.map((item4, index4) => item4.path ? <Menu.Item key={item4.path}><Link to={item4.path}>{item4.title}</Link></Menu.Item> : "")
                                                }
                                            </SubMenu> : <Menu.Item key={item3.title} icon={<PieChartOutlined />}><Link to={item3.path}>{item3.title}</Link></Menu.Item> : null)
                                        }
                                    </SubMenu> : item2.title ? <Menu.Item key={index2} icon={<PieChartOutlined />}><Link to={item2.path}>{item2.title}</Link></Menu.Item> : ""
                                    ) : "")

                                }
                            </Menu>
                        </Sider>
                        <Content>
                            <div className='Content_head'>
                                <Breadcrumb>
                                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                                    {
                                        this.state.bread ? this.state.bread.map((item, index) => <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>) : ''
                                    }
                                </Breadcrumb>
                            </div>
                            <div className='Content_header'>
                                <Tag><Link to="/home/welcome">首页</Link></Tag>
                                {
                                    this.state.Breadcrumb && this.state.Breadcrumb.map((item, index) => <Tag closable onClose={() => this.log(item)} key={index}><Link to={item.url}>{item.title}</Link></Tag>)
                                }
                            </div>
                            <div className='Content_main'>
                                {
                                    this.props.children
                                }
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        );
    }
}

export default connect()(Home);
